<template>
<div>
  <zh-form
      :span="8"
      ref="patrolForm"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :model="formInfo"
  >
    <div style="padding: 15px 20px">
      <zh-row>
        <zh-input
            prop="b0102"
            :disabled="editFlag"
            type="text"
            label="巡查文物"
            v-model="formInfo.b0102"
        ></zh-input>
        <zh-input
            prop="executive"
            :disabled="editFlag"
            type="text"
            label="执行人员"
            v-model="formInfo.executive"
        ></zh-input>
        <zh-input
            prop="phone"
            :disabled="editFlag"
            type="text"
            label="联系电话"
            v-model="formInfo.phone"
        ></zh-input>
        <zh-input
            prop="patrolPeriod"
            :disabled="editFlag"
            type="text"
            label="巡查周期"
            v-model="formInfo.patrolPeriod"
        ></zh-input>
        <zh-input
            prop="patrolTime"
            :disabled="editFlag"
            type="text"
            label="巡查时间"
            v-model="formInfo.patrolTime"
        ></zh-input>
        <zh-input
            prop="d0203"
            :disabled="editFlag"
            type="text"
            label="截止时间"
            v-model="formInfo.d0203"
        ></zh-input>
      </zh-row>
      <zh-row>
        <zh-input
            prop="d0511"
            :disabled="editFlag"
            type="text"
            label="打卡地址"
            :span="13"
            :labelCol="{ span: 5 }"
            :wrapperCol="{ span: 19 }"
            v-model="formInfo.d0511"
        ></zh-input>
        <zh-input
            style="margin-left: 62px"
            prop="d0512"
            :disabled="editFlag"
            type="text"
            label="经度"
            :span="4"
            v-model="formInfo.d0512"
        ></zh-input>
        <zh-input
            prop="d0513"
            :disabled="editFlag"
            type="text"
            label="纬度"
            :span="4"
            v-model="formInfo.d0513"
        ></zh-input>
      </zh-row>
      <div class="map-box">
        <div id="gssp"></div>
        <div class="scale">
          <p @click="checkEnlarge">
            <span>+</span>
          </p>
          <p @click="checkNarrow">
            <span>-</span>
          </p>
        </div>
      </div>
    </div>
  </zh-form>


  <a-divider orientation="left" style="font-size: 22px">检查情况</a-divider>
  <zh-card   mode="mode1" style="width: 100%;">
    <a-form-model ref="formInfo" layout="vertical" :model="formInfo">
<!--      <label style="color: black;font-size: 22px">检查情况</label>-->
      <a-row >
        <a-col >
      <a-form-model-item label="标志说明碑(牌)完好情况：">
        <a-checkbox-group v-model="this.formInfo.d0503CheckBox" name="d0503Checkboxgroup" :disabled="editFlag" :options="d0503Options" />
      </a-form-model-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col >
          <a-form-model-item label="消防器材完好情况，灭火器是否在保质期内：">
            <a-checkbox-group v-model="this.formInfo.d0504CheckBox" name="d0504checkboxgroup" :disabled="editFlag" :options="d0504Options" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col >
          <a-form-model-item label="消防水管出水是否通畅：">
            <a-checkbox-group v-model="this.formInfo.d0505CheckBox" name="d0504checkboxgroup" :disabled="editFlag" :options="d0504Options" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :span="4">
          <a-form-model-item label="健康状态：">
            <a-select
                style="width: 12vw;"
                v-model="formInfo.d0506"
                :disabled="editFlag"
                :showArrow="false"
            >
              <a-select-option
                  v-for="(item, index) in this.dictData.d0506"
                  :value="item.dictKey"
                  :key="index"
              >{{ item.dictValue }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="4">
          <a-form-model-item label="隐患类型：">
            <a-select
                style="width: 12vw;"
                v-model="formInfo.d0507"
                :disabled="editFlag"
                :showArrow="false"
            >
              <a-select-option
                  v-for="(item, index) in this.dictData.d0507"
                  :value="item.dictKey"
                  :key="index"
              >{{ item.dictValue }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="4">
          <a-form-model-item label="隐患等级：">
            <a-select
                style="width: 12vw;"
                v-model="formInfo.d0508"
                :disabled="editFlag"
                :showArrow="false"
            >
              <a-select-option
                  v-for="(item, index) in this.dictData.d0508"
                  :value="item.dictKey"
                  :key="index"
              >{{ item.dictValue }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row >
        <a-col :span="20">
          <a-form-model-item label="问题描述：">
            <a-textarea
                v-model="formInfo.d0510"
                :disabled="editFlag"
                :rows="4"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </zh-card>

  <a-divider orientation="left" style="font-size: 22px">现场照片(视频)</a-divider>
  <zh-card title="" mode="mode1" style="width: 100%;">
  <viewer :images="materialList" >
    <img v-for="data in materialList"  :src="data.materialType == '2'?fileShowUrl+MP4ShowId:fileShowUrl+data.showId"
         @click="materialClick(data)" :key="data.showId" width="10%" height="10%"/>
  </viewer>
  </zh-card>
</div>
</template>

<script>
import {
  getRecordDetails,
} from '@/services/system/whdngxlApi'
import AMapLoader from "@amap/amap-jsapi-loader";
import {gcj02towgs84} from "@/utils/wgs84.js";
import {fileShowUrl, getBatchDict} from "@/services/system/api";
export default {
  name: "CheckTaskDetailsForm",
  components: {

  },
  data() {
    return {
      dictData: {
        d0506: [],
        d0507: [],
        d0508: [],
      },
      formInfo:{
        d0401:'',
        b0101:'',
        d0203:'',
        d0204:'',
        executive:'',
        phone:'',
        b0129:'',
        d0503CheckBox:[],
        d0504CheckBox:[],
        d0505CheckBox:[],
        d0506:'',
        d0507:'',
        d0508:'',
        d0510:'',
        patrolTime:'',
        patrolPeriod:'',
        d0511:'',
        d0512:'',
        d0513:'',
        gpsLongitude: "", // 高德地图坐标
        gpsLatitude: "",
      },
      materialList:[], //材料信息
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      editFlag:true,
      zoomSize: 12,
      massMarks: "",
      areaMap: null,
      areaForm: {
        range: [],
        control: [],
      },
      rangePolygon: null,
      controlPolygon: null,
      d0503Options:[
          { label: '完好', value: '01' },
          { label: '划刻', value: '02' },
          { label: '涂污', value: '03' },
          { label: '破损', value: '04' },
      ],
      d0504Options:[
        { label: '是', value: '1' },
        { label: '否', value: '0' },
      ],
      fileShowUrl: fileShowUrl, //预览接口地址
      MP4ShowId:"8156d861d99a4f7b923e48735607ad9d",
    }
  },
  mounted() {
  },
  created() {
  },
  beforeDestroy() {
    // 销毁地图
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    initData(data){
      const params2 = {};
      params2.dictFields =
          "d0506,d0507,d0508";
      this.$http.post(getBatchDict, params2).then((res) => {
        this.dictData = res.result;
      });
      if(data.d0401){
        const params = {}
        params.d0401 = data.d0401
        this.$http.post(getRecordDetails, params).then(res => {
          this.formInfo = res.result
          this.materialList = res.result.materialList
          this.initMap();
        })
      }
    },
    materialClick(data){
      if(data.materialType == "2"){
        let url = this.fileShowUrl + data.showId;
        window.open(url, "_blank");
      }
    },
    initMap() {
      AMapLoader.load({
        key: "e38ea4dfc12f0fd7864f078c6ce7b48d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Marker",
          "AMap.Pixel",
          "AMap.DistrictSearch",
          "AMap.Autocomplete", // 输入提示插件
          "AMap.PlaceSearch", // POI搜索插件
          "AMap.Scale", // 右下角缩略图插件 比例尺
          "AMap.OverView", // 地图鹰眼插件
          "AMap.ToolBar", // 地图工具条
          "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          "AMap.PolyEditor", // 编辑 折线多，边形
          "AMap.CircleEditor", // 圆形编辑器插件
          "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
          "AMap.Geocoder",
        ],
      })
          .then((AMap) => {
            window.AMap = AMap;
            if (this.formInfo.d0512 && this.formInfo.d0513) {
              this.convertGps(this.formInfo.d0512, this.formInfo.d0513).then(() => {
                this.renderMap(true);
              });
            } else {
              this.renderMap(false);
            }
          })
          .catch((e) => {
            console.log(e);
          });
    },
    // WGS84坐标系(精度小于10米同国家2000坐标系) 转换成高德坐标系
    convertGps(longitude, dimension) {
      return new Promise((resolve, reject) => {
        AMap.convertFrom(
            [longitude, dimension],
            "gps",
            (status, result) => {
              if (status == "complete") {
                let lnglats = result.locations[0];
                  this.$set(this.formInfo, "gpsLongitude", lnglats.lng);
                  this.$set(this.formInfo, "gpsLatitude", lnglats.lat);
                resolve();
              } else {
                reject();
                this.$message.error("坐标转换失败，请联系管理员！");
              }
            }
        );
      });
    },
    // 高德坐标系 转换成 WGS84坐标系(精度小于10米同国家2000坐标系)
    convertGcj() {
      let wgsArr = gcj02towgs84(
          this.formInfo.gpsLongitude,
          this.formInfo.gpsLatitude
      );
      this.$set(this.formInfo, "d0512", wgsArr[0]);
      this.$set(this.formInfo, "d0513", wgsArr[1]);
    },

    // 渲染地图
    renderMap(flag) {
      this.map = new AMap.Map("gssp", {
        resizeEnable: true,
        zoom: this.zoomSize, //初始化地图级别
        center: [
          this.formInfo.gpsLongitude || 120.699279,
          this.formInfo.gpsLatitude || 27.993849,
        ], //初始化地图中心点位置
      });
      this.map.setDefaultCursor("pointer");
      if (flag) {
        if (this.formInfo.d0511) {
          this.setPoint();
        } else {
          this.pickUp();
        }
      }
    },
    // 经纬度-拾取
    pickUp() {
      if (!this.formInfo.d0512) {
        this.$message.error("请输入经度");
        return;
      }
      if (!this.formInfo.d0513) {
        this.$message.error("请输入纬度");
        return;
      }
      this.convertGps(this.formInfo.d0512, this.formInfo.d0513).then(() => {
        const geoOptions = {
          city: "0577", // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          radius: 1000,
        };
        const geocoder = new AMap.Geocoder(geoOptions);
        geocoder.getAddress(
            [this.formInfo.gpsLongitude, this.formInfo.gpsLatitude],
            (status, result) => {
              if (status === "complete" && result.regeocode) {
                let d0511 = result.regeocode.formattedAddress;
                this.$set(this.formInfo, "d0511", d0511);
                this.setPoint();
              } else {
                this.$message.error("根据经纬度查询地址失败");
              }
            }
        );
      });
    },
    // 安放点位
    setPoint() {
      if (this.massMarks) {
        this.massMarks.setData(null);
        this.massMarks.setMap(null);
      }
     /* var styleObject = [ {
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        // url: require("@/assets/img/icon-point.png"),  // 图标地址
        size: new AMap.Size(40, 40),      // 图标大小
        anchor: new AMap.Pixel(0, 0),// 图标显示位置偏移量，基准点为图标左上角
        zIndex: 10,
      }]
      this.massMarks = new AMap.MassMarks(null, {
        zIndex: 2,  // 海量点图层叠加的顺序
        zooms: [0, 30],  // 在指定地图缩放级别范围内展示海量点图层
        style: styleObject  // 设置样式对象
      });
      var data = []
      if (this.formInfo.gpsLongitude === undefined
          || this.formInfo.gpsLatitude === undefined) {
        this.pickUp()
      } else {
        data = [{
          lnglat: [this.formInfo.gpsLongitude, this.formInfo.gpsLatitude], //点标记位置
          name: 'd0511',
          style: 1, // 该数据的样式取值styleObjectArr对应的样式索引
          id: 1
        }
        ];
      }
      this.massMarks.setData(data);
      // 将海量点添加至地图实例
      this.massMarks.setMap(this.map);
      this.zoomSize = 15;
      this.map.setZoom(this.zoomSize);
      this.map.setCenter(
          [this.formInfo.gpsLongitude, this.formInfo.gpsLatitude,]
      );*/
      var icon = new AMap.Icon({
        size: new AMap.Size(30, 30),    // 图标尺寸
        image: '//vdata.amap.com/icons/b18/1/2.png',  // Icon的图像
      });
      var marker1 = new AMap.Marker({
        position: new AMap.LngLat(this.formInfo.gpsLongitude, this.formInfo.gpsLatitude),
        // icon:icon,
      });

      var markerList = [marker1];
      this.zoomSize = 15;
      this.map.setZoom(this.zoomSize);
      this.map.setCenter(
          [this.formInfo.gpsLongitude, this.formInfo.gpsLatitude]
      );
      this.map.add(markerList);
    },
    // 地图-放大
    checkEnlarge() {
      this.map.setZoom((this.zoomSize += 1));
    },
    // 地图-缩小
    checkNarrow() {
      if (this.zoomSize > 8) {
        this.map.setZoom((this.zoomSize -= 1));
      }
    },
  }
}
</script>

<style lang="less" scoped>
.map-box {
  position: relative;
  height: 600px;
  padding-left: 20px;

  #gssp {
    height: 100%;
  }

  #area {
    height: 100%;
  }

  .scale {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 30px;
    height: 80px;
    display: flex;
    flex-direction: column;

    p {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dfdfdf;
      background: #fff;
      font-size: 22px;
      color: #49bbeb;
      cursor: pointer;

      &:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }

      &:last-child {
        border-top: none;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }

      &:hover {
        background: #f2f2f2;
      }
    }
  }
}
</style>